<!--
 * @Author: Devin
 * @Date: 2022-02-28 14:29:37
 * @LastEditors: Devin
 * @LastEditTime: 2022-06-13 11:52:05
-->
<!--
 * @Description: 
 * @Author: Devin
 * @Date: 2021-11-05 15:14:13
 * @LastEditTime: 2022-06-13 10:36:07
 * @LastEditors: Devin
 * @Reference: 
-->
<template>
  <div class="components">
    <div class="left">
      <el-card id="远程数据模式">
        <template #header>
          <div class="el-card-header">远程数据模式</div>
          <div class="el-card-header-tip">
            <ul>
              <li>默认使用<code>axios</code>查询远程数据，让开发人员更关注业务，不在过多关心底层代码。</li>
              <li>除了支持远程数据的分页查询展示，还支持本地数据的分页。</li>
              <li>
                最大化地像可配置化迈进，让你尽可能少的写<code>html</code>,最大化地支持<code>Element</code>中的特性（持续更新）。
              </li>
            </ul>
          </div>
        </template>
        <CcTable type="remote" url="/table/list" :columns="columns6" showPagination :max-height="400"> </CcTable>
        <Code><div v-html="code.code"></div></Code>
      </el-card>
      <el-card id="基础用法">
        <template #header>
          <div class="el-card-header">基础用法</div>
          <div class="el-card-header-tip"></div>
        </template>

        <CcTable :columns="columns" :data="tableData">
          <template #index>123</template>  
        </CcTable>

        <Code><div v-html="code.code1"></div></Code>
      </el-card>
      <el-card id="空数据表格">
        <template #header>
          <div class="el-card-header">空数据表格</div>
          <div class="el-card-header-tip"></div>
        </template>
        <CcTable :columns="columns" :data="[]" emptyImgOrStr="img"> </CcTable>
        <br />
        <CcTable :columns="columns" :data="[]" emptyImgOrStr="str"> </CcTable>
        <br />
        <CcTable :columns="columns" :data="[]">
          <template #empty="{ emptyText }">
            <span style="color: red">{{ emptyText }}</span>
          </template>
        </CcTable>
        <Code><div v-html="code.code2"></div></Code>
      </el-card>
      <el-card id="操作列">
        <template #header>
          <div class="el-card-header">操作列</div>
          <div class="el-card-header-tip">很多业务场景下每个表格需要一个操作栏。</div>
        </template>
        <CcTable :columns="columns7" :data="tableData">
          <template #operation>
            <CcIconButton icon="cc-edit" showTip title="编辑"></CcIconButton>
            <CcIconButton icon="cc-ashbin" showTip title="删除"></CcIconButton>
          </template>
        </CcTable>
        <Code><div v-html="code.code3"></div></Code>
      </el-card>
      <el-card id="使用slot定义单元格和表头内容">
        <template #header>
          <div class="el-card-header">使用slot定义单元格和表头内容</div>
          <div class="el-card-header-tip">
            将就着用哈，这里提供了三个插槽、<code>el-table-column</code>、单元格内容、表头内容
          </div>
        </template>
        <CcTable :columns="columns8" :data="tableData">
          <template #date="{ column }">
            <span style="color: red">自定义表头{{ column.label }}</span>
          </template>
          <template #name="{ scope }">
            <span style="color: blue">自定义单元格{{ scope.row.name }}</span>
          </template>
          <template #operation="{ column }">
            <el-table-column :label="column.label">
              <CcIconButton icon="cc-edit" showTip title="编辑"></CcIconButton>
              <CcIconButton icon="cc-ashbin" showTip title="删除"></CcIconButton>
            </el-table-column>
          </template>
        </CcTable>
        <Code><div v-html="code.code4"></div></Code>
      </el-card>
      <el-card id="日期数据处理表格">
        <template #header>
          <div class="el-card-header">日期数据处理表格</div>
          <div class="el-card-header-tip">
            很多时候我想需要处理后端接口返回的时间的数据格式是否满足业务<br /><br />
            设置
            <code>dateFilter: true</code>
            并且默认时间格式是
            <code>YYYY-MM-DD HH:mm:ss</code>
            ，另外还可以设置日期格式
            <code>dateFilter: 'YYYY-MM-DD'</code>
            更多时间格式
            <a href="https://day.js.org/docs/en/display/format#list-of-all-available-formats" target="_blank">here </a>
          </div>
        </template>
        <CcTable :columns="columns1" :data="tableData">
          <template #expand="{ props }">
            <p class="paddingL40 paddingT20 paddingB20">
              <b>{{ props.row.name }}</b>
              <b class="paddingL40">{{ props.row.address }}</b>
            </p>
          </template>
        </CcTable>
        <Code><div v-html="code.code5"></div></Code>
      </el-card>
      <el-card id="自定义显示内容">
        <template #header>
          <div class="el-card-header">自定义显示内容</div>
          <div class="el-card-header-tip">
            一般情况下会有部分数据不会显示接口原有数据，需要开发进行二次处理<br /><br />
            这里提供了一个render函数<code>
              (row: 当前行数据, column: 当前列数据, scope: 原始el-table提供的数据) => VNodeChild | string</code
            >
          </div>
        </template>
        <CcTable :columns="columns2" :data="tableData"></CcTable>
        <Code></Code>
      </el-card>
      <el-card id="多级表头">
        <template #header>
          <div class="el-card-header">多级表头</div>
          <div class="el-card-header-tip">
            对官方的多级表头进行内部实现，设置children即可实现多级表头<br /><br />
            当然你也可以设置<code>slotColumn</code>自行定义<code>el-table-column</code>
          </div>
        </template>
        <CcTable :columns="columns3" :data="tableData"></CcTable>
        <Code></Code>
      </el-card>
      <el-card id="排序">
        <template #header>
          <div class="el-card-header">排序</div>
          <div class="el-card-header-tip">
            对官方的多级表头进行内部实现，设置children即可实现多级表头<br /><br />
            当然你也可以设置<code>slotColumn</code>自行定义<code>el-table-column</code>
          </div>
        </template>
        <CcTable :columns="columns4" :data="tableData"></CcTable>
        <Code></Code>
      </el-card>
      <el-card id="可编辑表格">
        <template #header>
          <div class="el-card-header">可编辑表格</div>
          <div class="el-card-header-tip">你先干嘛就干嘛，单击单元格可进行编辑，失去焦点还原</div>
        </template>
        <CcTable :columns="columns5" :data="tableData1"></CcTable>
        <pre style="font-family: system-ui">{{ JSON.stringify(tableData1, null, 2) }}</pre>
        <Code></Code>
      </el-card>
      <el-card id="右键菜单">
        <template #header>
          <div class="el-card-header">右键菜单</div>
          <div class="el-card-header-tip">这个表格有点意思哈，可进行简单的右键菜单事件，默认提供个功能：编辑、删除</div>
        </template>
        <CcTable :columns="columns" :data="tableData" :showContextmenu="true" @menuDel="menuFun" @menuEdit="menuFun">
        </CcTable>
        <Code></Code>
      </el-card>
    </div>
    <div class="right">
      <CcAnchor :sections="sections" :offset="120" width="150px" @changeAhchor="changeAhchor"> </CcAnchor>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, h, resolveComponent, ref, nextTick } from 'vue';
import CcTable from '@/components/packages/cc-table/src/main.vue';
import { Link } from '@element-plus/icons-vue';
import CcInput from '@/components/packages/cc-input/index';
import { ccMessage } from '@/components/packages/cc-message';
import code from './code.js';
const ShowOrEdit = defineComponent({
  props: {
    value: [String, Number],
    onUpdateValue: [Function, Array]
  },
  setup(props: any) {
    const isEdit = ref(false);
    const inputRef = ref<any>(null);
    const inputValue = ref(props.value);
    function handleOnClick() {
      isEdit.value = true;
      nextTick(() => {
        inputRef.value.$refs['cc-input'].focus();
      });
    }
    function handleBlur(v: any) {
      isEdit.value = false;
      props.onUpdateValue(v.target.value);
    }

    return () =>
      h(
        'div',
        {
          onClick: handleOnClick,
          style: 'cursor: pointer;width:100%'
        },
        isEdit.value
          ? h(CcInput, {
              ref: inputRef,
              modelValue: inputValue.value,
              'onUpdate:modelValue': (v: string | number | undefined) => {
                inputValue.value = v;
              },
              onBlur: handleBlur
            })
          : props.value
          ? props.value
          : '-'
      );
  }
});
export default defineComponent({
  components: { CcTable, Link },
  setup() {
    const state = reactive({
      code,
      sections: [
        {
          label: '远程数据模式'
        },
        {
          label: '基础用法'
        },

        { label: '空数据表格' },
        {
          label: '操作列'
        },
        { label: '使用slot定义单元格和表头内容' },
        { label: '日期数据处理表格' },
        { label: '自定义显示内容' },
        { label: '多级表头' },
        { label: '排序' },
        { label: '可编辑表格' },
        { label: '右键菜单' }
      ],
      columns: [
        { type: 'index', slotHeader:'index', label: '序号', align: 'center' },
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' },
        {
          prop: 'address',
          label: '地址'
        }
      ],
      columns1: [
        { type: 'expand' },
        { prop: 'date', label: '日期YYYY-MM-DD HH:mm:ss', dateFilter: true },
        { prop: 'date', label: '日期YYYY.MM.DD', dateFilter: 'YYYY.MM.DD' },
        { prop: 'date', label: '日期MM.DD', dateFilter: 'MM.DD' }
      ],
      columns2: [
        {
          type: 'selection',
          selectable: (row: any, index: number) => {
            if (index >= 2) {
              return true;
            } else {
              return false;
            }
          }
        },
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' },
        {
          prop: 'address',
          label: '地址',
          render: ({ row, scope }: { row: { address: string }; scope: { $index: number } }): any => {
            if (scope.$index % 2 === 0) {
              const tag = resolveComponent('el-tag');
              return h(tag, row.address);
            } else {
              return row.address;
            }
          }
        }
      ],
      columns3: [
        { prop: 'date', label: '日期' },
        {
          label: '人员',
          children: [
            { prop: 'name', label: '姓名' },
            {
              label: '详细信息',
              children: [
                {
                  prop: 'address',
                  label: '地址',
                  render: ({ row, scope }: { row: { address: string }; scope: { $index: number } }): any => {
                    if (scope.$index % 2 === 0) {
                      const tag = resolveComponent('el-tag');
                      return h(tag, row.address);
                    } else {
                      return row.address;
                    }
                  }
                },
                { prop: 'phone', label: '电话' }
              ]
            }
          ]
        }
      ],
      columns4: [
        { prop: 'date', label: '日期', sortable: true },
        { prop: 'name', label: '姓名' },
        {
          prop: 'address',
          label: '地址',
          render: ({ row, scope }: { row: { address: string }; scope: { $index: number } }): any => {
            if (scope.$index % 2 === 0) {
              const tag = resolveComponent('el-tag');
              return h(tag, row.address);
            } else {
              return row.address;
            }
          }
        }
      ],
      columns5: [
        {
          prop: 'date',
          label: '日期',
          render: ({ row, scope }: { row: { date: string }; scope: { $index: number } }): any => {
            return h(ShowOrEdit, {
              value: row.date,
              onUpdateValue(v: string) {
                state.tableData1[scope.$index].date = v;
              }
            });
          }
        },
        {
          prop: 'name',
          label: '姓名',
          render: ({ row, scope }: { row: { name: string }; scope: { $index: number } }): any => {
            return h(ShowOrEdit, {
              value: row.name,
              onUpdateValue(v: string) {
                state.tableData1[scope.$index].name = v;
              }
            });
          }
        },
        {
          prop: 'address',
          label: '地址',
          render: ({ row, scope }: { row: { address: string }; scope: { $index: number } }): any => {
            return h(ShowOrEdit, {
              value: row.address,
              onUpdateValue(v: string) {
                state.tableData1[scope.$index].address = v;
              }
            });
          }
        },
        {
          prop: 'phone',
          label: '电话'
        }
      ],
      columns6: [
        { type: 'index', label: '序号', align: 'center' },
        { prop: 'id', label: '身份证' },
        { prop: 'name', label: '姓名' },
        { prop: 'date', label: '出生日期', dateFilter: true },
        { prop: 'email', label: '邮箱' },
        {
          prop: 'status',
          label: '性别',
          render: ({ row }: { row: any }) => {
            const tag = resolveComponent('el-tag');
            return row.status === '男' ? h(tag, {}, row.status) : h(tag, { type: 'success' }, row.status);
          }
        },
        { prop: 'address', label: '地址' }
      ],
      columns7: [
        { type: 'index', label: '序号', align: 'center' },
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' },
        {
          prop: 'address',
          label: '地址'
        },
        {
          prop: 'operation',
          label: '操作',
          slotName: 'operation'
        }
      ],
      columns8: [
        { type: 'index', label: '序号', align: 'center' },
        { prop: 'date', label: '日期', slotHeader: 'date' },
        { prop: 'name', label: '姓名', slotName: 'name' },
        {
          prop: 'address',
          label: '地址'
        },
        {
          prop: 'operation',
          label: '操作',
          slotColumn: 'operation'
        }
      ],
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          phone: '123**************'
        },
        {
          date: '2016-05-02',
          name: 'Devin',
          address: 'No. 189, Grove St, Los Angeles',
          phone: '123**************'
        },
        {
          date: '2016-05-04',
          name: 'Terry',
          address: 'No. 189, Grove St, Los Angeles',
          phone: '123**************'
        },
        {
          date: '2016-05-01',
          name: 'Adele',
          address: 'No. 189, Grove St, Los Angeles',
          phone: '123**************'
        }
      ],
      tableData1: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          phone: '123**************'
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          phone: '123**************'
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          phone: '123**************'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          phone: '123**************'
        }
      ]
    });
    const menuFun = (row: any, column: any, cell: any) => {
      ccMessage.success('你好' + row.name);
    };
    return {
      ...toRefs(state),
      menuFun,
      changeAhchor: (data: any) => {}
    };
  }
});
</script>

<style scoped></style>
